<template>
  <div class="chatview-layout">
    <aside class="chatview-sidebar" :style="{ width: sidebarOpen ? '240px' : '0' }">
      <div class="chatview-sidebar-container">
        <el-button
            class="new-chat-button"
            color="#3ca0be"
            :dark=true
            @click="onNewChat"
            :icon="Plus"
            round>
          新建对话
        </el-button>
        <label class="chat-label">对话记录</label>
        <el-scrollbar class="chat-list-scrollbar">
          <div class="chat-list">
            <div
                v-for="item in chatList"
                :key="item.id"
                :class="['chat-list-item', { selected: selectedId === item.id }]"
                @click="selectedId = item.id"
            >
              {{ item.title }}
            </div>
          </div>
        </el-scrollbar>
      </div>
      <el-tooltip
          effect="dark"
          :content="toggleTitle"
          placement="right"
          :disabled="toggleTooltipDisabled"
          :show-arrow="false"
          hide-after="0">
        <button class="sidebar-toggle-btn"
                @click="onToggle">
          <el-icon v-if="sidebarOpen" size="20" color="#3ca0be">
            <CaretLeft/>
          </el-icon>
          <el-icon v-else size="20" color="#3ca0be">
            <CaretRight/>
          </el-icon>
        </button>
      </el-tooltip>
    </aside>
    <section class="chatview-content">
      <el-container class="chat-container">
        <el-header class="chat-header">
          <el-tooltip
              class="box-item"
              effect="dark"
              content="新建对话"
              placement="bottom"
              :show-arrow="false"
              hide-after="0">
            <button class="new-chat-btn2"
                    @click="onNewChat"
                    v-show="!sidebarOpen">
              <el-icon size="25" color="#3ca0be">
                <CirclePlusFilled
                    v-show="!sidebarOpen"
                    @click="onNewChat"/>
              </el-icon>
            </button>
          </el-tooltip>
        </el-header>
        <el-main class="chat-main">
          <el-scrollbar>
            <div
                v-for="item in chatMessages"
                :key="item.id">
              <div v-if="item.role === 'user'">
                <UserMsg :text="item.content"/>
              </div>
              <div v-if="item.role === 'assistant'">
                <AssistantMsg :text="item.content"/>
              </div>
            </div>
          </el-scrollbar>
        </el-main>
        <el-footer class="chat-footer">
          <div class="input-container">
            <div class="upper-panel" :class="{ collapsed: !panelExpanded }">
              <div class="file-display">
                <div
                    v-for="file in files"
                    :key="file.id"
                    class="file-item"
                >
                  <div v-if="panelExpanded">
                    <FileIndicator :file-name="file.name" :type="file.type" @remove="removeFile(file.id)"/>
                  </div>
                  <div v-else>
                    <FileIndicatorSimple :file-name="file.name" :type="file.type"/>
                  </div>
                </div>
              </div>
              <div class="upper-panel-right">
                <div class="collapse-button">
                  <el-icon @click="togglePanel" color="grey" size="20">
                    <ArrowDown v-if="panelExpanded"/>
                    <ArrowUp v-else/>
                  </el-icon>
                </div>
                <div class="show-selector" v-show="panelExpanded">
                  <el-popover
                      placement="top-end"
                      :width="150"
                      trigger="click"
                      popper-class="selector-popover"
                      @show="fetchSelectorData">
                    <template #reference>
                      <button>
                        <img src="@/assets/images/menu.svg" alt="menu" class="menu-icon"/>
                      </button>
                    </template>
                    <div class="selector-content">
                      <div
                          v-if="selectorData.length > 0"
                          class="selector-item select-all"
                          @click="selectAll">
                        选择全部
                      </div>
                      <div
                          v-for="item in selectorData"
                          :key="item.id"
                          class="selector-item"
                          @click="selectItem(item)">
                        {{ item.name }}
                      </div>
                      <div v-if="selectorData.length === 0" class="no-data">
                        无可选数据
                      </div>
                    </div>
                  </el-popover>
                </div>
              </div>
            </div>
            <div class="input-panel">
              <div class="input-panel-left">
                <el-upload class="upload-button"
                           limit="3"
                           accept=".pdf"
                           :auto-upload="false"
                           :show-file-list="false">
                  <img src="@/assets/images/upload.svg" alt="upload" class="upload-icon"/>
                </el-upload>
              </div>
              <div class="input-panel-center">
                <el-input
                    v-model="inputText"
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 4 }"
                    maxlength="1000"
                    :show-word-limit="inputText.length >= 900"
                    placeholder="请输入内容"
                    class="input-textarea"
                />
              </div>
              <div class="input-panel-right">
                <el-button
                    type="primary"
                    :disabled="!inputText.trim()"
                    @click="onSend"
                    circle>
                  <el-icon>
                    <Promotion/>
                  </el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </el-footer>
      </el-container>
    </section>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {
  CirclePlusFilled,
  Plus,
  CaretLeft,
  CaretRight,
  ArrowUp,
  ArrowDown,
  Promotion
} from '@element-plus/icons-vue'
import FileIndicator from "@/components/FileIndicator.vue";
import FileIndicatorSimple from "@/components/FileIndicatorSimple.vue";
import UserMsg from "@/components/UserMsg.vue";
import AssistantMsg from "@/components/AssistantMsg.vue";

const sidebarOpen = ref(true)
const selectedId = ref(null)
const chatList = ref([
  {id: 1, title: '与AI的对话1'},
  {id: 2, title: '与AI的对话2'},
  {id: 3, title: '与AI的对话3'},
])
const toggleAlt = ref('收起')
const toggleTitle = ref('收起对话记录')
const toggleTooltipDisabled = ref(false)
const panelExpanded = ref(true)
const files = ref([
  {id: 1, name: 'file1.txt', type: 'temp'},
  {id: 2, name: 'file2.pdf', type: 'all'},
  {id: 3, name: 'file3abcdefg.doc', type: 'single'},
])
const inputText = ref('')

// 选择器数据
const selectorData = ref([])

const chatMessages = ref([
    {
      id: 1,
      role: 'user',
      content: '你好，这是用户输入的文本内容。',
      timestamp: '2023-09-05 10:30:00'
    },
    {
      id: 2,
      role: 'assistant',
      content: '你好，这是AI的回复内容。',
      timestamp: '2023-09-05 10:31:00'
    }
])

// 控制tooltip是否应该显示（在鼠标悬停时）
const toggleTooltipHover = ref(false)

onMounted(() => {
  if (chatList.value.length) selectedId.value = chatList.value[0].id
})

const onNewChat = () => {
  // 新建对话逻辑
}

const onToggle = () => {
  toggleTooltipDisabled.value = true

  // 切换侧边栏状态
  sidebarOpen.value = !sidebarOpen.value
  if (sidebarOpen.value) {
    toggleAlt.value = '收起'
    toggleTitle.value = '收起对话记录'
  } else {
    toggleAlt.value = '展开'
    toggleTitle.value = '展开对话记录'
  }
  setTimeout(() => {
    toggleTooltipDisabled.value = false
  }, 300)
}

// 模拟从后端获取数据
const fetchSelectorData = () => {
  // 模拟异步请求
  setTimeout(() => {
    // 模拟获取到的数据
    selectorData.value = [
      {id: 123, name: '数据文件1.pdf'},
      {id: 234, name: 'data—file2.pdf'},
      {id: 345, name: 'data—file3.pdf'},
      {id: 456, name: 'data—file4.pdf'}
    ]
  }, 300)
}

// 选择全部
const selectAll = () => {
  if (files.value.some(file => file.type === 'all')) {
    return
  }
  // 添加一条name为空，type为all的数据
  const newFile = {
    id: 0, // 使用时间戳作为唯一ID
    name: '',
    type: 'all'
  }
  files.value = files.value.filter(file => file.type === 'temp')
  files.value.push(newFile)

}

// 选择单个项
const selectItem = (item) => {
  if (files.value.some(file => file.id === item.id)) {
    return
  }
  // 添加选中的数据到files列表
  const newFile = {
    id: item.id, // 生成唯一ID
    name: item.name,
    type: 'single'
  }

  if (files.value.some(file => file.type === 'all')) {
    files.value = files.value.filter(file => file.type !== 'all')
  }
  files.value.push(newFile)
}

// 删除文件
const removeFile = (fileId) => {
  files.value = files.value.filter(file => file.id !== fileId)
}

const togglePanel = () => {
  panelExpanded.value = !panelExpanded.value
}

const onSend = () => {
  // 发送消息逻辑
}

</script>

<style scoped>
.chatview-layout {
  display: flex;
  height: 100%;
  flex: 1;
  background: #f0f5f5;
  border-radius: 10px;
  min-height: 0;
  box-sizing: border-box;
}

.chatview-sidebar {
  width: 240px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  background: #fdfdfd;
  border-radius: 10px 0 0 10px;
  transition: width 0.3s;
}
.chatview-sidebar[style*="width: 0px"] {
  background: transparent;
  border-radius: 0;
}
.chatview-sidebar-container {
  overflow: hidden;
  width: 240px;
  height: calc(100% - 20px);
  position: absolute;
  right: 0;
  top: 10px;
  display: flex;
  flex-direction: column;
  background: #fdfdfd;
  padding: 15px;
  box-sizing: border-box;
}

.new-chat-button {
  margin-top: 10px;
  color: white;
  border: none;
}

.new-chat-button :deep(.el-icon) {
  color: white;
}

.new-chat-btn2 {
  position: absolute;
  top: 40px;
  left: 30px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
}

.sidebar-toggle-btn {
  position: absolute;
  right: -22px;
  top: 50%;
  width: 22px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  border: none;
  background: none;
}


.chat-label {
  font-size: 14px;
  color: #999;
  margin-top: 20px;
  margin-bottom: 10px;
}

.chat-list-scrollbar {
  flex: 1;
  margin-top: 10px;
}

.chat-list {
  padding-right: 10px;
}

.chat-list-item {
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}

.chat-list-item.selected {
  background: #e6f7fa;
  color: #3ca0be;
  font-weight: bold;
}

.chat-list-item:hover {
  background: #e6f7fa;
}

.chatview-content {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-header {
  height: 70px;
  position: relative;
  width: 100%;
}


.chat-main {
  flex: 1;
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.chat-main :deep(.el-scrollbar) {
  width: 100%;
  height: 100%;
  flex: 1;
}

.chat-main :deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
  height: 100%;
}

.chat-main :deep(.el-scrollbar__view) {
  height: 100%;
}

.chat-msg-container {
  width: calc(100% - 120px);
  height: 100%;
  background-color: #ffffff;
  max-width: 900px;
  min-width: 360px;
  margin: 0 auto;
}

.chat-messages {
  width: 100%;
  min-height: 60px;
  height: 100%;
}

.upper-panel {
  display: flex;
  min-height: 48px;
  justify-content: space-between;
  align-items: stretch;
  background-color: #f5f5f5;
  border-radius: 10px 10px 0 0;
  padding: 10px;
  border: 1px solid #3ca0be;
  border-bottom: none;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.upper-panel.collapsed {
  min-height: 25px;
  padding: 8px 10px 8px 10px;
}

.file-display {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex: 1;
  gap: 5px;
  overflow: hidden;
}

.upper-panel.collapsed .file-display {
  flex-wrap: nowrap;
  overflow: hidden;
  position: relative;
}

.file-item {
  margin-right: 5px;
  cursor: pointer;
}

.upper-panel-right {
  display: flex;
  flex-direction: column;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  position: relative;
  justify-content: space-between;
}

.collapse-button {
  cursor: pointer;
  position: relative;
  top: -5px;
  right: -28px;
}

.show-selector {
  cursor: pointer;
  position: relative;
  bottom: -6px;
  left: 0;
}

.show-selector button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

:deep(.selector-popover) {
  padding: 0;
  border: 1px solid #3ca0be;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.selector-content {
  max-height: 200px;
  overflow-y: auto;
}

.selector-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.selector-item:last-child {
  border-bottom: none;
}

.selector-item:hover {
  background-color: #f5f5f5;
}

.select-all {
  font-weight: bold;
  color: #3ca0be;
}

.no-data {
  padding: 15px;
  text-align: center;
  color: #999;
}

.input-panel {
  background-color: #ffffff;
  border-radius: 0 0 10px 10px;
  padding: 8px;
  border: 1px solid #3ca0be;
  border-top: none;
  height: auto;
  min-height: 35px;
  display: flex;
  align-items: flex-end;
}

.input-panel-left {
  width: 40px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.upload-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: right;
  align-items: center;
}

.upload-icon {
  width: 24px;
  height: 24px;
}

.input-panel-center {
  flex: 1;
  min-width: 0; /* 允许内容溢出时收缩 */
}

.input-panel-right {
  width: 60px;
  flex-shrink: 0;
  padding-left: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.input-textarea {
  width: 100%;
}

.input-textarea :deep(.el-textarea__inner) {
  resize: none;
  border: none;
  box-shadow: none;
  outline: none;
}


.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.chat-footer {
  height: auto;
  min-height: 60px;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 40px;
  margin-top: 36px;
}

.input-container {
  flex-direction: column;
  width: calc(100% - 48px);
  height: 100%;
  max-width: 900px;
  min-width: 120px;
  box-sizing: border-box;

}

.menu-icon {
  width: 24px;
  height: 24px;
  filter: invert(39%) sepia(47%) saturate(1000%) hue-rotate(160deg) brightness(85%) contrast(90%);
}

</style>